
<template>
    <view :class="$style.page">
        <PageHeader>
            <view class="PAGE_TITLE">我的</view>
        </PageHeader>
        <view class="p-l-r">
            <view :class="$style.header">
                <image :class="$style.avatar" v-if="globalStore.userInfo.avatar" :src="globalStore.userInfo.avatar" />
                <view :class="$style.defaultAvatar" v-else>
                    <uni-icons type="person" color="#0052D9" size="36"></uni-icons>
                </view>
                <view class="m-l-40">
                    <template v-if="globalStore.loginStatus">
                        <view :class="$style.name">{{ globalStore.userInfo.name }}</view>
                        <view class="m-t-10" style="display: flex;">
                            <template v-if="globalStore.role == 'STUDENT'">
                                <view :class="$style.label">{{ globalStore.userInfo.xh }}</view>
                                <view :class="$style.label" class="m-l-20">{{ globalStore.userInfo.grade }}{{ globalStore.userInfo.class }}</view>
                            </template>
                            <template v-else>
                                <view :class="$style.label">{{ globalStore.userInfo.gh }}</view>
                                <view :class="$style.label" class="m-l-20" v-if="globalStore.userInfo.dept">{{ globalStore.userInfo.dept }}</view>
                            </template>
                        </view>
                    </template>
                    <template v-else>
                        <view :class="$style.name" url="/pages/login" @click="globalStore.login()">请先登录/注册</view>
                    </template>
                    
                </view>
            </view>


            <view class="m-t-40" :class="$style.cells">
                <view :class="$style.cell" @click="goNav('/pages/feedback/index')">
                    <image :class="$style.icon" mode="widthFix" src="@/static/edit.png" />
                    <text :class="$style.title">反馈建议</text>
                    <uni-icons type="right" color="#90A3BF" size="12"></uni-icons>
                </view>
                <view :class="$style.cell" v-if="globalStore.loginStatus" @click="logout">
                    <image :class="$style.icon" mode="widthFix" src="@/static/logout.png" />
                    <text :class="$style.title">退出登录</text>
                    <uni-icons type="right" color="#90A3BF" size="12"></uni-icons>
                </view>
            </view>

        </view>



        <TabBar />
    </view>
</template>
<script lang="ts" setup>
import PageHeader from '@/components/PageHeader.vue'
    import TabBar from '@/TabBar/index.vue'
import { useGlobalStore } from '@/stores';
    
    const globalStore = useGlobalStore()

    function logout() {
        uni.showModal({
            title:'确定退出登录吗',
            success:(success)=>{
                if(success.confirm) {
                    globalStore.logout()
                }
            },
        })
    }

    function goNav(url:string) {
        uni.navigateTo({url})
    }
</script>


<style lang="scss" module>
    .page{
        height: 100vh;
        position: relative;
        padding-bottom: $tab-bar-height;
        background: $background-color;
    }

    .header{
        height: 192rpx;
        background-color: #fff;
        border-radius: 24rpx;
        padding: 0 $base-space;
        display:flex;
        align-items:center;


        .avatar{
            width: 128rpx;
            height: 128rpx;
            border-radius: 50%;
        }


        .defaultAvatar{
            width: 128rpx;
            height: 128rpx;
            background-color: #D9E1FF;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .name{
            font-size: 32rpx;
            font-weight: bold;
            color: rgba(0, 0, 0, 0.9);
        }

        .label{
            display: inline-flex;
            align-items: center;
            padding: 0 10rpx;
            border-radius: 6rpx;
            background-color: #F3F3F3;
            height: 40rpx;
            font-size: 20rpx;
            color: rgba(0, 0, 0, 0.9);
        }
    }

    .cells{
        background-color: #fff;
        border-radius: 24rpx;
        padding: 0 $base-space;
        

        .cell{
            height: 112rpx;
            display: flex;
            align-items: center;

            border-bottom: 1rpx solid #E7E7E7;
            &:last-of-type{
                border-bottom: none;
            }


            .icon{
                display: block;
                width: 48rpx;

            }

            .title{
                flex: 1;
                font-size: 32rpx;
                margin-left: 20rpx;
                color: rgba(0, 0, 0, 0.9);
            }
        }
    }
</style>